import React, { Component } from 'react';
import './GoodNav.scss'
import { withRouter } from 'react-router-dom'
import { Button, Toast } from 'antd-mobile'
import { StarOutline, SendOutline, ShopbagOutline } from "antd-mobile-icons";
import service from '../../api';

class GoodNav extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            flag: false
        }
    }

     componentDidMount() {


    }

    // 去收藏
    Collection() {

    }

    // 去购物车
    toshopcart() {
        this.props.history.push('/index/shopcart')
    }
    // 加入购物车
    async cartAdd() {
        var res = await service.cart.cart_add({token:localStorage.getItem('token') , userid: localStorage.getItem('userid'), proid: this.props.location.state.id, num: 1 })
        // console.log(res);
        if (res.data.code == 200) {
            Toast.show({ content: '已成功加入购物车' })
        }
    }

    render() {
        return (
            <div className='goodnav'>
                <ul>
                    <li onClick={() => { this.Collection() }} className={`${this.state.flag ? 'active' : ''}`}>
                        <StarOutline fontSize={24} />
                        收藏
                    </li>
                    <li>
                        <SendOutline fontSize={24} />
                        分享
                    </li>
                    <li onClick={() => { this.toshopcart() }}>
                        <ShopbagOutline fontSize={24} />
                        购物车
                    </li>
                    <li className="anniu">
                        <Button onClick={() => { this.cartAdd() }} color="danger" className="button-left">加入购物车</Button>
                        <Button color="warning" className="button-right">立即购买</Button>
                    </li>
                </ul>
            </div>
        );
    }
}

export default withRouter(GoodNav);